<template>
    <div class="talk">
        <button @click="getLoveTalk">Get one sentence</button>
        <ul>
            <li v-for="talk in talkList" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script setup lang="ts" name="LoveTalk">
    import { reactive } from 'vue';
    import axios from 'axios'
    import { nanoid } from 'nanoid'
    import { useTalkStore } from '@/store/loveTalk'
    import { storeToRefs } from 'pinia';

    const talkStore = useTalkStore()
    const {talkList} = storeToRefs(talkStore);
    talkStore.$subscribe((mutate, state) => {
        console.log('talkStore changed', mutate, state);
        localStorage.setItem('talkList', JSON.stringify(state.talkList))
    })

    function getLoveTalk() {
        talkStore.getATalk();
    }

    // let talkList = reactive([
    //     {id: '01', title: 'ttt01'},
    //     {id: '02', title: 'ttt02'},
    //     {id: '03', title: 'ttt03'},
    //     {id: '04', title: 'ttt04'},
    // ])

    // async function getLoveTalk() {
    //     // 连续结构赋值加重命名
    //     let {data:{content:title}} = await axios.get('https://api.uomg.com/api/rand.qinghua?format=json')
    //     let obj = {id: nanoid(), title: title}
    //     talkList.unshift(obj)
    // }
</script>

<style scoped>
    .talk {
        background-color: orange;
        padding: 10px;
        border-radius: 10px;
        box-shadow: 0 0 10px;
    }
</style>